<!--
 * @Description: 
 * @Version: @1.0.0
 * @Autor: LuLu
 * @Date: 2023-07-11 11:19:58
 * @LastEditors: LuLu
 * @LastEditTime: 2023-07-27 15:21:51
-->
<template>
  <div class="content">
    <!-- <scale-box width="1920" height="1080" bgc="transparent" :delay="100">
       <div style="color:#fff; font-size: 30px;">542353453534</div>
      </scale-box> -->
    <dv-full-screen-container>
      <!-- <scale-box :width="1920" :height="1080" bgc="transparent" :delay="100"> -->
      <div class="main">
        <div class="pageTop">
          <img @click.stop="logout" src="../../assets/images/user.png" alt="" />
        </div>
        <div class="item">
          <!-- 页面左侧内容 -->
          <div class="itemL">
            <!-- 咨询统计 -->
            <div class="ConsultationStatistics">
              <div class="title">
                <div style="font-family: YouSheBiaoTiHei;">
                  <!-- 咨询统计 -->
                  <img src="../../assets/images/ask.png" alt="">
                </div>
                <div class="btn">
                  <div
                    @click="handleLineBtns(item)"
                    :class="lineComName == item.comName ? 'active' : 'default'"
                    v-for="(item, index) in lineBtns"
                    :key="index"
                  >
                    <span
                      :class="
                        lineComName == item.comName ? 'activeBorder' : 'default'
                      "
                      >{{ item.btnName }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="subheading">
                <span>咨询趋势</span>
                <span style="font-family: PFDINTextPro-BlackItalic, PFDINTextPro;">{{ askSum }}</span>
              </div>
              <!-- 咨询趋势 -->
              <ConsultingTrends
                :askType="askType"
                @askNum="askNum"
              ></ConsultingTrends>
              <!-- 咨询数据对比 -->
              <div class="subheading">
                <span>咨询数据对比</span>
              </div>
              <ConsultationData :promptList="promptList"></ConsultationData>
            </div>

            <!-- 科普统计 -->
            <div class="popularizationScience mt50">
              <div class="title">
                <div style="font-family: PFDINTextPro-BlackItalic, PFDINTextPro;">
                  <!-- 科普统计 -->
                  <img src="../../assets/images/kepu (2).png" alt="">
                </div>
              </div>
              <div class="subheading mb12">
                <span>科普统计</span>
              </div>
              <!-- 科普数据 -->
              <div
                style="display: flex; flex-wrap: wrap; padding-left: 0.9375rem"
              >
                <div
                  class="Science"
                  v-for="(item, index) in ScienceList"
                  :key="index"
                >
                  <div class="number">{{ item.value }}</div>
                  <div class="name">{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="itemCentre">
            <!-- 顶部提示数据 -->
            <div style="display: flex">
              <div
                class="prompt"
                v-for="(item, index) in promptList"
                :key="index"
              >
                <img :src="item.image" alt="" />
                <div>
                  <!-- <div class="number">{{ item.value }}</div> -->
                  <VueCountUp :start-value="0" :end-value=item.value :duration="3" class="number"/>
                  <div class="name">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 中间地图 -->
            <div class="map">
              <CMap @provMap="provMap"></CMap>
            </div>
            <!-- 在线诊所列表 #00152e -->
            <div class="subheading">
              <span class="mb20">在线诊所列表</span>
            </div>
            <div style="">
              <dv-scroll-board
                ref="scroll-board"
                :config="config"
                class="lulu"
                style="width: 816px; height: 200px"
              />
            </div>
          </div>
          <!-- 右边内容 -->
          <div class="itemR">
            <!-- 通话统计 -->
            <div class="ConsultationStatistics">
              <div class="title">
                <div style="font-family: PFDINTextPro-BlackItalic, PFDINTextPro;">
                  <!-- 通话统计 -->
                  <img src="../../assets/images/phone.png" alt="">
                </div>
                <div class="btn">
                  <div
                    @click="handleLineBtns2(item)"
                    :class="lineComName2 == item.comName ? 'active' : 'default'"
                    v-for="(item, index) in lineBtns"
                    :key="index"
                  >
                    <span
                      :class="
                        lineComName2 == item.comName
                          ? 'activeBorder'
                          : 'default'
                      "
                      >{{ item.btnName }}</span
                    >
                  </div>
                </div>
              </div>
              <div class="subheading">
                <span>家庭通话趋势</span>
                <span style="font-family: PFDINTextPro-BlackItalic, PFDINTextPro;">{{ phoneSum }}</span>
              </div>
              <!-- 家庭通话趋势 -->
              <Communicate
                :phoneType="phoneType"
                @phoneNum="phoneNum"
              ></Communicate>
            </div>

            <!-- 用户统计 -->
            <div class="UserStatistics mt50">
              <div class="title">
                <div style="font-family: PFDINTextPro-BlackItalic, PFDINTextPro;">
                  <!-- 用户统计 -->
                  <img src="../../assets/images/user(2).png" alt="">
                  </div>
              </div>
              <div class="subheading mb12">
                <span>用户统计</span>
              </div>
              <!-- 用户统计 -->
              <div
                style="display: flex; flex-wrap: wrap; padding-left: 0.9375rem"
              >
                <div
                  class="user"
                  v-for="(item, index) in ScienceListUser"
                  :key="index"
                >
                  <div class="number">{{ item.value }}</div>
                  <div class="name">{{ item.name }}</div>
                </div>
              </div>
              <div class="subheading">
                <span>用户数据对比</span>
                <span>{{ ScienceListUser[0].value }}</span>
              </div>
              <!-- 用户数据对比 -->
              <div class="userStyle">
                <ul v-for="(item, index) in userDataList" :key="index">
                  <div class="userL">
                    <li class="userName">{{ item.name }}</li>
                    <p
                      class="userValue"
                      :style="{ width: +item.value + '%' }"
                    ></p>
                  </div>
                  <li class="userNumber">{{ item.value }}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
    <!-- </scale-box> -->
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { getCoupe, getUser, getCount, getList } from "@/api/home.js";
import VueCountUp from 'vue-countupjs'
// 大屏
import ScaleBox from "vue2-scale-box";
// 背景图
import mapjpg from "@/assets/images/profile.jpg"; //引入地图json文件
import btn01 from "@/assets/images/btn01.png"; //引入地图json文件
import btn02 from "@/assets/images/btn02.png"; //引入地图json文件
import btn03 from "@/assets/images/btn03.png"; //引入地图json文件

// 引用数据趋势组件
import ConsultingTrends from "@/components/ConsultingTrends/index";
import ConsultationData from "@/components/ConsultationData/index";
import Communicate from "@/components/communicate/index";
import CMap from "@/components/CMap/index";

export default {
  name: "Login",
  components: { ScaleBox },
  props: {},
  components: {
    ConsultingTrends,
    ConsultationData,
    Communicate,
    CMap, VueCountUp
  },
  data() {
    return {
      // 咨询统计按钮
      lineBtns: [
        { id: 1, btnName: "今日", comName: "Circuit" },
        { id: 2, btnName: "近7天", comName: "Slope" },
        { id: 3, btnName: "近30天", comName: "Station" },
      ],
      lineCurrent: 1,
      lineComName: "Circuit",
      lineCurrent2: 1,
      lineComName2: "Circuit",
      // 科普统计
      ScienceList: [
        { id: 1, value: "1342", name: "文章发布数" },
        { id: 2, value: "532", name: "视频发布数" },
        { id: 3, value: "921", name: "科普发布数" },
        { id: 4, value: "921", name: "文章浏览量" },
        { id: 5, value: "921", name: "视频播放量" },
        { id: 6, value: "921", name: "科普浏览量" },
      ],
      // 用户统计
      ScienceListUser: [
        { id: 1, value: "1342", name: "总用户数" },
        { id: 2, value: "532", name: "小淮医管家用户数" },
        { id: 3, value: "921", name: "小淮医用户数" },
        { id: 4, value: "921", name: "TV用户数" },
        { id: 5, value: "921", name: "PAD用户数" },
        { id: 6, value: "921", name: "供应商数量" },
      ],
      // 中间内容
      // 提示圆灯
      promptList: [
        { id: 1, value: "1342", name: "TV咨询总数", image: btn01 },
        { id: 2, value: "532", name: "PAD咨询总数", image: btn02 },
        { id: 3, value: "921", name: "APP咨询总数", image: btn03 },
      ],
      // 地图数据
      config: {
        centerPoint: [0.48, 0.35],
        points: [
          [0.52, 0.23],
          [0.43, 0.29],
          [0.59, 0.35],
          [0.53, 0.47],
          [0.45, 0.54],
          [0.36, 0.38],
          [0.62, 0.55],
          [0.56, 0.56],
          [0.37, 0.66],
          [0.55, 0.81],
          [0.55, 0.67],
          [0.37, 0.29],
          [0.2, 0.36],
          [0.76, 0.41],
          [0.59, 0.18],
          [0.68, 0.17],
          [0.59, 0.1],
        ],
        bgImgUrl: mapjpg,
        // 列表
        data: [
          [
            '<span style="color:#00BDF9;">包河区万年埠卫生院</span>',
            "内蒙古自治区鄂尔多斯市达拉特旗永兴路30号",
          ],
          ["包河区万年埠卫生院", "内蒙古自治区鄂尔多斯市达拉特旗永兴"],
          ["包河区万年埠卫生院", "内蒙古自治区鄂尔多斯市达拉特旗永兴路30号"]
        ],
        columnWidth: [316],
        align: ["center", "center"],
        carousel: "page",
        evenRowBGC: "#002D4C",
        oddRowBGC: "#00152e",
        waitTime: 5000,
      },
      // 用户数据对比
      userDataList: [
        {
          id: "1",
          name: "小淮医管家",
          value: 80,
        },
        {
          id: "2",
          name: "PAD平板",
          value: 60,
        },
        {
          id: "3",
          name: "TV电视",
          value: 70,
        },
        {
          id: "4",
          name: "小淮医",
          value: 40,
        },
        {
          id: "5",
          name: "供应商",
          value: 50,
        },
      ],
      data: [],
      // 咨询type
      askType: "1",
      // 通话type
      phoneType: "1",
      // 咨询总数
      askSum: "",
      // 通话总数
      phoneSum: "",
      // 获取用户统计数据-参数
      userParams: {
        address: "",
      },
    };
  },
  watch: {
    data(val, oldVal) {
      // console.log(1111, val, oldVal); //val：是新值 oldVal：是旧值
      // this.getTrendcurveGateway(val);
    },
  },
  created() {
    // 科普统计
    this.getCoupe();
    // 用户统计
    this.getUser();
    // 咨询数据
    this.getCount();
    // 在线诊所列表
    this.getList();
  },
  mounted() {},
  methods: {
    // 地图选择省份
    provMap(data) {
      this.userParams.address = data;
      this.getUser();
    },

    // 咨询总数
    phoneNum(data) {
      this.phoneSum = data;
    },

    // 咨询总数
    askNum(data) {
      this.askSum = data;
    },

    // 用户统计
    getUser() {
      getUser(this.userParams).then((res) => {
        if (res.code == 200) {
          this.ScienceListUser[0].value = res.data.userAll;
          this.ScienceListUser[1].value = res.data.userApp;
          this.ScienceListUser[2].value = res.data.userDoctor;
          this.ScienceListUser[3].value = res.data.userTv;
          this.ScienceListUser[4].value = res.data.userPad;
          this.ScienceListUser[5].value = res.data.userAgent;
          this.userDataList[0].value = res.data.userApp;
          this.userDataList[1].value = res.data.userDoctor;
          this.userDataList[2].value = res.data.userTv;
          this.userDataList[3].value = res.data.userPad;
          this.userDataList[4].value = res.data.userAgent;
        }
      });
    },

    // 在线诊所
    getList() {
      getList().then((res) => {
        if (res.code == 200) {
          let datas = res.rows;
          datas.forEach((item, index) => {
            this.data[index] = [];
            this.data[index].push(datas[index].agentName);
            if (datas[index].addressDetails) {
              this.data[index].push(
                datas[index].address + datas[index].addressDetails
              );
            } else {
              this.data[index].push(datas[index].address);
            }
            if (this.data.length < 5) {
              this.data.push('')
            } 
            if (this.data.length < 5) {
              this.data.push('')
            } 
            if (this.data.length < 5) {
              this.data.push('')
            } 
            if (this.data.length < 5) {
              this.data.push('')
            } 
            if (this.data.length < 5) {
              this.data.push('')
            } 
          });
          const scrollBoard = this.$refs["scroll-board"];
          scrollBoard.updateRows(this.data);
        }
      });
    },

    // 咨询数据
    getCount() {
      getCount().then((res) => {
        if (res.code == 200) {
          this.$nextTick(() => {
            this.promptList[0].value = res.data.tv;
            this.promptList[1].value = res.data.pad;
            this.promptList[2].value = res.data.app;
          });
        }
      });
    },

    // 科普统计
    getCoupe() {
      getCoupe().then((res) => {
        if (res.code == 200) {
          this.ScienceList[0].value = res.data.articlePublish;
          this.ScienceList[1].value = res.data.videoPublish;
          this.ScienceList[2].value = res.data.coupePublish;
          this.ScienceList[3].value = res.data.articleBrowse;
          this.ScienceList[4].value = res.data.videoBrowse;
          this.ScienceList[5].value = res.data.coupeBrowse;
        }
      });
    },

    // 按钮切换
    handleLineBtns(item) {
      this.askType = item.id;
      this.lineCurrent = item.index;
      this.lineComName = item.comName;
    },
    handleLineBtns2(item) {
      this.phoneType = item.id;
      this.lineCurrent2 = item.index;
      this.lineComName2 = item.comName;
    },

    // 退出登录
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = "/login";
          });
        })
        .catch(() => {});
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss">
@font-face {
  font-family: YouSheBiaoTiHei;
  src: url("/@/assets/fonts/YouSheBiaoTiHei/YouSheBiaoTiHei-2.ttf") format('truetype');
}
html {
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  // background: url("../assets/images/login-background.jpg");
}
.dv-scroll-board .rows .ceil {
  font-size: 0.8125rem;
  font-family: AlibabaPuHuiTiM;
  color: #00bdf9;
}
// .el-table .warning-row {
//   background: oldlace;
// }

// .el-table .success-row {
//   background: #f0f9eb;
// }
// .el-table thead {
//   display: none;
// }
// .lulu:nth-of-type(2n) {
//  background: linear-gradient(180deg, #003455 0%, #001A34 100%);
//   height: 40px;
// }
.content {
  // 整体内容 -背景图
  .main {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/bg.png");
    // 页面顶部背景
    .pageTop {
      width: 100%;
      height: 7rem;
      background: url("../../assets/images/topBg.png");
      img {
        float: right;
        margin-top: 0.875rem;
        margin-right: 1.5625rem;
        cursor: pointer;
      }
    }
    .item {
      display: flex;
      justify-content: space-between;
      padding: 0 1.875rem 2.5rem 1.875rem;
      color: #fff;
      // margin-top: -1rem;
      margin-top: -0.875rem;
      // font-size: 1rem; //16px

      // font-size: 1.1428rem; //16px
      // 左面内容
      .itemL {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        width: 28.75rem;
        // 科普统计
        .popularizationScience {
          .Science {
            background: url("../../assets/images/kepu.png");
            width: 8.4375rem;
            height: 6.0625rem;
            margin-right: 0.5rem;
            margin-top: 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .number {
              font-size: 1.5rem;
              font-family: PFDINTextPro-BlackItalic, PFDINTextPro;
              font-weight: 600;
              color: #ffffff;
              margin-top: 1.25rem;
              margin-bottom: 0.3125rem;
            }
            .name {
              font-size: 0.8125rem;
              font-family: AlibabaPuHuiTiM;
              color: #009cc5;
            }
          }
        }
      }
      // 中间内容
      .itemCentre {
        flex: 1;
        padding: 2.5rem 3.75rem 0 3.75rem;
        // 顶部提示数据
        .prompt {
          display: flex;
          margin-right: 2rem;
          img {
            margin-right: 0.6rem;
            height: 2.2rem;
          }
          .number {
            // font-size: 1.875rem;
            font-size: 1.5rem;
            font-weight: 600;
            // font-family: YouSheBiaoTiHei;
              font-family: PFDINTextPro-BlackItalic, PFDINTextPro;
            color: #ffffff;
            // margin-bottom: 0.4375rem;
            // margin-top: 0.25rem;
          }
          .name {
            // font-size: 0.75rem;
            font-size: 0.6rem;
            font-family: AlibabaPuHuiTiM;
            color: #009bcf;
          }
        }
        // 中间地图
        .map {
          // height: 35.8125rem;
          height: 36.875rem;
        }
        // .在线诊所列表
      }
      .itemR {
        width: 28.75rem;
        .UserStatistics {
          .user {
            background: url("../../assets/images/kepu.png");
            width: 8.4375rem;
            height: 6.0625rem;
            margin-right: 0.5rem;
            margin-top: 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .number {
              font-size: 1.5rem;
              font-family: PFDINTextPro-BlackItalic, PFDINTextPro;
              font-weight: 600;
              color: #ffffff;
              margin-top: 1.25rem;
              margin-bottom: 0.3125rem;
            }
            .name {
              font-size: 0.8125rem;
              font-family: "AlibabaPuHuiTiM";
              color: #009cc5;
            }
          }
          .userStyle {
            // width: 100%;
            overflow: hidden;
            padding: 0 0.8125rem 0 1.0625rem;
            ul {
              display: flex;
              justify-content: space-between;
              align-items: center;
              list-style-type: none;
              padding: 0;
              margin: 0;

              .userL {
                flex: 1;
                display: flex;
                align-items: center;
                width: 17.1875rem;
                .userName {
                  width: 5rem;
                  font-size: 0.8125rem;
                  font-family: AlibabaPuHuiTiM;
                  color: #009cc5;
                  text-align: right;
                  margin-right: 0.375rem;
                }
              }

              .userNumber {
                width: 1.875rem;
                margin-left: 0.875rem;
                text-align: right;
                font-size: 0.875rem;
                font-family: AlibabaPuHuiTiR;
                color: #0081ac;
              }
            }
            p {
              padding: 0;
              margin: 0;
            }
          }
          .userStyle ul:nth-child(1) p {
            height: 1.125rem;
            border-radius: 0px 7px 7px 0px;
            background: linear-gradient(
              to left,
              #00dbfc 0%,
              rgba(0, 219, 252, 0.29) 100%
            );
          }

          .userStyle ul:nth-child(2) p {
            height: 1.125rem;
            background: linear-gradient(
              to left,
              #00ec6c 0%,
              rgba(0, 236, 108, 0.29) 100%
            );
            border-radius: 0px 7px 7px 0px;
          }
          .userStyle ul:nth-child(3) p {
            height: 1.125rem;
            border-radius: 0px 7px 7px 0px;
            background: linear-gradient(
              to left,
              #ffd945 0%,
              rgba(255, 217, 69, 0.29) 100%
            );
          }
          .userStyle ul:nth-child(4) p {
            height: 1.125rem;
            border-radius: 0px 7px 7px 0px;
            background: linear-gradient(
              to left,
              #ff6065 0%,
              rgba(255, 96, 101, 0.29) 100%
            );
          }
          .userStyle ul:nth-child(5) p {
            height: 1.125rem;
            border-radius: 0px 7px 7px 0px;
            background: linear-gradient(
              to left,
              #9253ff 0%,
              rgba(146, 83, 255, 0.29) 100%
            );
          }
          .userStyle ul:nth-child(1) {
            margin-top: 1.5625rem;
          }
          .userStyle ul {
            margin-top: 1.25rem;
          }
        }
      }
    }
    // 标题
    .title {
      width: 27.875rem;
      height: 3rem;
      display: flex;
      justify-content: space-between;
      // line-height: 3rem;
      background: url("../../assets/images/title.png");
      padding: 0.5625rem 0 0.8125rem 1.8125rem;
      font-size: 1.125rem;
      font-family: YouSheBiaoTiHei;
      color: #f8ffff;
      font-weight: 600;
      // 按钮
      .btn {
        font-size: 0.875rem;
        font-family: AlibabaPuHuiTiM;
        color: #00bdf9;
        font-weight: 400;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }
    // 小标题
    .subheading {
      display: flex;
      justify-content: space-between;
      padding: 0 0.8125rem 0 1.0625rem;
      font-size: 0.9375rem;
      font-family: YouSheBiaoTiHei;
      // font-weight: 600;
      align-items: center;
      color: #ffffff;
      margin-top: 1.875rem;
    }
    // 按钮样式
    .default {
      // margin-left: 1.625rem;
      padding: 0.375rem 0.3125rem;
      border-radius: 4px;
      border: 1px solid transparent;
    }

    .active {
      // margin-left: 1.625rem;
      padding: 0.375rem 0.3125rem;
      background: #005a7b;
      border-radius: 4px;
      border: 1px solid #009ccd;
    }
    .activeBorder {
      // border-image-source: radial-gradient(
      //   60% 60%,
      //   transparent 0px,
      //   transparent 100%,
      //   cyan 100%
      // );
      // border-image-slice: 1;
      // border-width: 1px;
      // border-style: solid;
      // border-image-outset: 1cm;
      border: 1px solid transparent;
      border-image-source: radial-gradient(
        53% 59%,
        transparent 0px,
        transparent 100%,
        #00dbfc 100%
      );
      border-image-slice: 3;
      border-width: 2px;
      border-style: solid;
      border-image-outset: 0.2cm;
    }
    .mt50 {
      margin-top: 3.125rem;
    }
    .mb20 {
      margin-bottom: 1.25rem;
    }
    .mb12 {
      margin-bottom: 0.75rem;
    }
  }
}
</style>
